<template>
  <div class="videolist-wrap bg-wrap">
    <nav-bar :title="tabTitle"></nav-bar>
    <div class="videolist-tabs">
      <van-tabs
        v-model="active"
        swipeable
        animated
        sticky
        :offset-top="offsetTop"
        title-inactive-color="#ffffff"
        title-active-color="#ff5b73"
        color="#ff5b73"
        @change="chooseTab"
      >
        <van-tab v-for="item of classify" :title="item" :key="item">
          <div class="content">
            <div class="list clearfix">
              <mv-item v-for="item of videolist" :key="item.cover" :item="item"></mv-item>
              <div class="no-data">
                <loading :isFixed="isFixed" :isShow="isShow" :finishedText="finishedText"></loading>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import mvItem from '@/components/MvItem'
import loading from '@/components/Loading'
import NavBar from '@/components/Navbar'
export default {
  name: 'videolist',
  data () {
    return {
      tabBorder: false,
      active: 0,
      zIndex: 90,
      offsetTop: 44,
      classify: ['全部视频', '内地', '港台', '欧美', '日本', '韩国'],
      videolist: [],
      area: '',
      limit: 30,
      offset: 0,
      updateTime: 0,
      loadStatus: true,
      isFixed: false,
      isShow: false,
      finishedText: '',
      order: 'hot',
      tabTitle: '视频广场'
    }
  },
  components: {
    mvItem,
    loading,
    NavBar
  },
  methods: {
    // 下拉滚动加载
    __initScroll () {
      window.addEventListener('scroll', () => {
        var _h = document.body.scrollHeight
        var scrollTop = document.documentElement.scrollTop
        var clientHeight = document.documentElement.clientHeight
        if (scrollTop + clientHeight >= _h * 0.9) {
          if (this.loadStatus) {
            this.getPlayList(this.area, this.limit, this.offset)
          }
        }
      })
    },
    // 选择分类
    chooseTab (index, title) {
      if (title === '全部歌单' && index === 0) {
        title = ''
      }
      this.videolist = []
      this.limit = 30
      this.offset = 0
      this.area = title
      this.getPlayList(this.area, this.limit, this.offset)
    },
    // 获取歌单其他列表
    async getPlayList (area, limit, offset) {
      try {
        this.loadStatus = false
        let res = await this.$api.getMvAll(area, limit, offset)
        console.log(res)
        if (res.code === 200) {
          this.videolist = this.videolist.concat(res.data)
          if (res.hasMore) {
            this.finishedText = '加载中...'
            this.isShow = true
            this.loadStatus = true
            this.offset += 30
          } else {
            this.finishedText = '厉害啊, 拉完了~~'
            this.isShow = false
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getPlayList(this.area, this.limit, this.offset)
  },
  mounted () {
    this.__initScroll()
  }
}
</script>

<style lang="stylus" scoped>
.videolist-wrap {
  .videolist-tabs {
    .van-tab__pane {
      padding: 0.25rem 0rem;
    }
    .content {
      width: 100%;
      height: 100%;
      color: #fff;
      .no-data {
        width: 100%;
        font-size: 0.24rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>
